
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.6.10.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <form action="" @submit.prevent="commit()">
            用户：<input type="text" v-model="uname"><br>
            密码：<input type="text" v-model="upass"><br>
            <input type="submit" :disabled="!disabled">
        </form>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                uname: '',
                upass: '',
            },
            methods: {
                commit() {
                    alert('您的账号：'+this.uname+'您的密码是：'+this.upass)
                }
            },
            computed: {
                disabled:function(){
                    let preg = /^[a-z]{1}[\w]{5,17}$/;
                    return preg.test(this.uname) && this.upass.length > 5
                }
                
            },

        });
    </script>
    <script>
        const home = {
            template: "#home"
        }
        const login = {
            template: '#login'
        }

        const routes = [{
                path: '/home',
                component: home
            },
            {
                path: '/login',
                component: login
            }

        ]

        const router = new VueRouter({
            routes
        })

        const vm = new Vue({
            router,
            el: '#app',
            data: {
                title:'设置路由中 激活状态类（使用系统类）'
            },
            methods: {}
        });
    </script>
    <script>
        const home = {
            template: "#home"
        }
        const login = {
            template: '#login'
        }

        const my404 = {
            template:"#my404"
        }

        const routes = [{
                path: '/www/index/hello/home',
                component: home,
                name:'h'
            },
            {
                path: '/login',
                component: login
            },
            {
                path:'/',
                redirect:'/www/index/hello/home'
            },
            {
                path:'*',
                component:my404
            }

        ]

        const router = new VueRouter({
            routes,
            linkActiveClass:'myactive'
        })

        const vm = new Vue({
            router,
            el: '#app',
            data: {
                title:'设置路由中 激活状态类（设置默认类名）'
            },
            methods: {}
        });
    </script>
</body>

</html>